<template>
	<view class="message">
		<view class="time" v-if="item.type && item.type == 'showTime'">{{item.payload.text}}</view>
		<view class="message-list">
			<!-- in -->
			<view class="avatar-box" :class="{'system-avatar':item.conversationID == 'C2C10089'}"
				v-if="item.flow === 'in' && item.type != 'TIMCustomElem'" @tap.stop.prevent="clickHead(item)">
				<image class="avatar" mode="aspectFill" :src="item.avatar"></image>
			</view>
			<!-- out -->
			<view class="show-in" v-if="item.flow === 'out' && item.type != 'TIMCustomElem'"></view>
			<view class="message" :class="[item.flow === 'out'?'out':'in',{'custom':item.type == 'TIMCustomElem'}]">
				<view class="isPeerRead" v-if="item.flow === 'out' && item.type != 'TIMCustomElem'">
					{{item.read ? '已读': '未读'}}
				</view>
				<TUI-TextMessage v-if="item.type === 'TIMTextElem'" :message="item"></TUI-TextMessage>
				<TUI-AudioMessage v-if="item.type === 'TIMSoundElem'" :message="item" :isMine="item.flow === 'out'">
				</TUI-AudioMessage>
				<TUI-ImageMessage v-if="item.type === 'TIMImageElem'" :message="item" :isMine="item.flow === 'out'">
				</TUI-ImageMessage>
				<TUI-CustomMessage v-if="item.type === 'TIMCustomElem'" :message="item" :isMine="item.flow === 'out'"
					@openPhone="openPhone"></TUI-CustomMessage>
			</view>
			<view class="avatar-box" v-show="item.flow === 'out' && item.type != 'TIMCustomElem'">
				<image class="avatar" mode="aspectFill" :src="item.avatar"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TUITextMessage from '../message-elements/text-message/index';
	import TUIAudioMessage from '../message-elements/audio-message/index';
	import TUIImageMessage from '../message-elements/image-message/index';
	import TUICustomMessage from '../message-elements/custom-message/index';
	import {
		timeFormat,
		timeFrom
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	// #ifdef APP-PLUS
	import vShow from '@/utils/weex-v-show.js'
	Vue.directive('show', vShow)
	// #endif
	const app = getApp();
	export default {
		props: ['item', "xxx"],
		components: {
			TUITextMessage,
			TUIAudioMessage,
			TUIImageMessage,
			TUICustomMessage
		},
		filters: {
			timeFormats: function(value) {
				return timeFormat(value * 1000, 'yyyy年mm月dd日 hh:MM:ss')
			}
		},
		data() {
			return {}
		},
		created() {
			// console.log(this.item)
		},
		methods: {
			clickHead(e) {
				let that = this
				let id = e.conversationID.split('C2C')[1]
				app._post_form("/client/getByImUserId", id, (res) => {
					if (res.data.settleState == 1) {
						app.navigationTo('page_sharing/accompany/details?id=' + e.from + '&from=1')
					} else {
						this.$emit("showTip");
					}
				}, false, () => {})

			},
			openPhone() {
				this.$emit("openPhone");
			}
		}
	}
</script>

<style lang="scss">
	.message {
		padding: 0 20rpx;

		.time {
			font-size: 26rpx;
			font-weight: 400;
			color: #999B9B;
			line-height: 37rpx;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.message-list {
		@include flex(row);
		margin-bottom: 20rpx;

		.show-in {
			flex: 1;
		}

		.out {
			// margin-right: 10rpx;
			align-items: flex-end;
			flex-direction: row;
			justify-content: flex-end;
			align-items: flex-end;

			.isPeerRead {
				font-size: 20rpx;
				font-weight: 400;
				color: #999;
				margin-right: 8rpx;
			}
		}

		.in {
			// margin-left: 10rpx;
			align-items: flex-start;
		}

		.message {
			width: 430rpx;

			&.custom {
				width: 100%;
				display: block !important;
			}

			.text {
				font-size: 30rpx;
			}
		}

		.avatar-box {
			width: 90rpx;
			height: 90rpx;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 500px;
			}

			&.system-avatar {
				.avatar {
					border-radius: 0;
				}
			}
		}
	}
</style>